import  useFinshState from '../store/useFoodStore';
import {shallow} from 'zustand/shallow'
import {useEffect, useState} from 'react'
const Bear = () => {
    console.log('Bear render ...');
    
    const {fish,increasePopulation,addPopulation,removeFish } = useFinshState();
    const [background, setBackaground] = useState('gold')

    useEffect(()=>{
        const unsub = useFinshState.subscribe(state =>state.fish, ((fish,prevFish) => {
            console.log('fish changed', fish, prevFish);
        }), {
            fireImmediately: true,
            equalityFn:shallow
        });

        return () => {
            unsub()
        }

        return unsub; //简写方式
    }, []);
    return (
        <div style={{border:'1px solid red', width: 400, padding:20, background: background}}>
            <h2>Bear Box</h2>
            <h3>fish: {fish}</h3>
            <p>随机数: {Math.random()}</p>
           <button onClick={addPopulation}>加一条</button>
           <button onClick={increasePopulation} style={{margin:'0 20px'}}>减一条</button>
           <button onClick={removeFish}>移除所有fish</button>
        </div>
    )
}

export default Bear;





// import  useFinshState from './../store/useFishStore'
// const Bear = () => {
//     console.log('Bear render ...');
    
//     const {fish,increasePopulation,addPopulation } = useFinshState()
//     return (
//         <div style={{border:'1px solid red', width: 400, padding:20, background: fish > 5 ? 'pink': 'gold'}}>
//             <h3>fish: {fish}</h3>
//             <p>随机数: {Math.random()}</p>
//            <button onClick={addPopulation} style={{marginRight:20}}>加一条</button>
//            <button onClick={increasePopulation}>减一条</button>
//         </div>
//     )
// }

// export default Bear;